<template>
  <!-- <view class="tab">
    <text id="all" class="all tab_change" data-hot="all" @click="change">全部</text>
    <text class="tab_change" data-hot="ing" @click="change">进行中</text>
    <text class="tab_change" data-hot="over" @click="change">已完结</text>
  </view>-->

  <view
    :class="[styleType === 'text'?'segmented-control--text' : 'segmented-control--button' ]"
    :style="{ borderColor: styleType === 'text' ? '' : activeColor }"
    class="segmented-control"
  >
    <view
      v-for="(item, index) in values"
      :class="[ styleType === 'text'?'segmented-control__item--text': 'segmented-control__item--button' , index === currentIndex&&styleType === 'button'?'segmented-control__item--button--active': '' , index === 0&&styleType === 'button'?'segmented-control__item--button--first': '',index === values.length - 1&&styleType === 'button'?'segmented-control__item--button--last': '' ]"
      :key="index"
      :style="{
        backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '#fff',borderColor: index === currentIndex&&styleType === 'text'||styleType === 'button'?activeColor:'transparent'
      }"
      class="segmented-control__item"
      @click="_onClick(index)"
    >
      <text 
         class="segmented-control__text "
        :class="[index == currentIndex && styleType == 'text'? 'activeClass' :' '  ]"
      >{{ item }}</text>
    </view>
  </view>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      currentIndex: 0
    };
  },
  // methods: {
  //   //点击切换导航
  //   change(e) {
  //     console.log(e.target.dataset.hot);
  //   }
  // },
  props: {
    current: {
      type: Number,
      default: 0
    },
    values: {
      type: Array,
      default() {
        return [];
      }
    },
    activeColor: {
      type: String,
      default: "#007aff"
    },
    styleType: {
      type: String,
      default: "button"
    },
   
  },
  watch: {
    current(val) {
      if (val !== this.currentIndex) {
        this.currentIndex = val;
      }
    }
  },
  created() {
    this.currentIndex = this.current;
    console.log(this.styleType)
  },
  methods: {
    _onClick(index) {
      if (this.currentIndex !== index) {
        this.currentIndex = index;
        this.$emit("clickItem", { currentIndex: index });
      }
    }
  }
};
</script>
<style lang='less' scoped>
.activeClass{
  color:#007aff !important;
  border-bottom:1px solid #004CB3;
}
.unactiveClass{
  color:#000;
  border-bottom:none;
}
.segmented-control {
  // display: flex;
  box-sizing: border-box;
  flex-direction: row;
  height: 65rpx;
  line-height: 65rpx;
  overflow: hidden;
}
.segmented-control__item {
  display: inline-flex;
  box-sizing: border-box;
  position: relative;
  // flex: 1;
  margin-left: 30rpx;
  font-weight:bold;
  justify-content: center;
  align-items: center;
}
.segmented-control__item--button {
  border-style: solid;
  border-bottom-width: 1px;           
  // color: red;
}
.segmented-control__item--button--first {
  border-left-width: 1px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.segmented-control__item--button--last {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.segmented-control__item--text {
  border-bottom-style: solid;
  border-bottom-width: 3px;
}
.segmented-control__text {
  position: relative;
  font-size: 32rpx;
  line-height: 20px;
  text-align: center;
  color:#000;
 
}
</style>